﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>
    <script src="./publicJs/index.iife.min.js"></script>
    <!-- 自动添加VXE到全局 -->
    <link rel="stylesheet" href="./publicJs/vxe/ui.style.min.css" />
    <link rel="stylesheet" href="./publicJs/vxe/table.style.min.css" />
    <script src="./publicJs/vxe/xe-utils.umd.min.js"></script>
    <script src="./publicJs/vxe/ui.index.umd.min.js"></script>
    <script src="./publicJs/vxe/table.index.umd.min.js"></script>

    <title>生产订单管理</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <el-button @click="() => console.log('警告')">警告</el-button>
        <div style="height: 90vh">
          <vxe-toolbar ref="toolbarRef" custom>
            <template #buttons>
              <vxe-input
                v-model="filterName"
                type="search"
                placeholder="全表搜索"
                clearable
                @change="searchEvent"
              ></vxe-input>
            </template>
          </vxe-toolbar>
          <vxe-table
            ref="tableRef"
            border
            show-overflow
            show-header-overflow
            show-footer-overflow
            height="100%"
            id="myCustomStorage1"
            :custom-config="{storage: true}"
            :column-config="{resizable: true,useKey:true}"
            :row-config="{useKey:true}"
            :virtual-y-config="{enabled: true, gt: 0}"
            :data="searchData"
          >
            <vxe-column type="seq" width="70" align="center"></vxe-column>
            <!-- <vxe-column field="name" title="Name" width="70" align="center" sortable></vxe-column>
            <vxe-column field="role" title="Role" align="center"></vxe-column>
            <vxe-column field="sex" title="Sex" align="center">
              <template #default="{ row }">
                <vxe-input v-model="row.sex">
                  <template #suffix>
                    <vxe-button statys="primary">搜索</vxe-button>
                  </template>
                </vxe-input>
              </template>
            </vxe-column> -->
            <vxe-column
              v-for="column in tableColumns"
              type="html"
              :key="column.field"
              :field="column.field"
              :title="column.title"
              :width="column.width"
              :sortable="column.sortable"
              align="center"
            >
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import myAxiosWXPost from './myAxios/myAxiosWXPost.js'
    import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
    import v4 from './publicJs/uuidv4.js'
    const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue
    const { Bottom, Top, Right, Delete, Refresh, Calendar, Check, Search } = ElementPlusIconsVue

    import { GetMatCodeParamString } from './QDQZJH_JS/getMatCodeParamString.js'
    import { GetDataList2 } from './QDQZJH_JS/GetDataList2.js'

    const app = createApp({
      name: 'test',
      components: {},
      setup() {
        let loading = ref(false)
        let filterName = ref('')
        let tableRef = ref(null)
        let toolbarRef = ref(null)

        onMounted(async () => {
          const $table = tableRef.value
          const $toolbar = toolbarRef.value
          if ($table && $toolbar) {
            $table.connect($toolbar)
          }

          let obj = await GetMatCodeParamString()
          console.log('obj :>> ', obj)
          let result = await GetDataList2(obj.metCodeParamString)
          tableColumns.value = Object.keys(result[0]).map((field) => ({
            field: field,
            title: getColumnTitle(field), // 将字段名转换为中文标题
            width: getColumnWidth(field),
            sortable: true,
          }))
          tableData.value = result
          console.log('result :>> ', result)
          handleSearch()
        })
        let tableColumns = ref([])
        const tableData = ref([])
        const searchData = ref([])

        let getColumnTitle = (field) => {
          // 字段名到中文标题的映射
          const titleMap = {
            MATNR: '物料编号',
            MAKTX: '物料描述',
            LABST: '当前库存',
            oriLABST: '原始库存',
            NOT_FINISHED_COUNT: '未完成数量',
            OUTCOUNT_SUM: '出库总数',
            DIFFERENCE_BETWEEN_STOCK__OUTCOUNT: '库存出库差异',
            REQUIRE_SUJI: '数机需求',
            REQUIRE_JINGSHU: '经数需求',
            REQUIRE_WAIXIAO: '外销需求',
            RSMNG: '需求数量',
            REQUIRE_SUM: '需求汇总',
            SUM_DIFFERENCE: '汇总差异',
            DRK: 'DRK',
            WQCG_ALL: '完全采购',
            PLANED_COUNT: '计划数量',
            OUTCOUNT_SUJI: '数机出库',
            OUTCOUNT_WAIXIAO: '外销出库',
            WEEK_PLANED: '周计划',
            WEEK_RELEASED_NOT_PLANED: '周发布未计划',
            SAP_NOT_CLEAR_COUNT: 'SAP未清数量',
            CLEAR_DIFFERENCE: '清算差异',
            AVG_MONTH: '月平均',
            DIFFERENCE_BETWEEN_REQUIRE_MONTH: '月需求差异',
            SAFE_STOCK: '安全库存',
            SAFE_STOCK_CJ: '安全库存CJ',
            MATTYPE: '物料类型',
            DIFFERENCE_BETWEEN_PLANED__OUTCOUNT: '计划出库差异',
            WEEK_RELEASED: '周发布',
          }
          return titleMap[field] || field
        }
        let getColumnWidth = (field) => {
          // 根据字段类型设置不同的列宽
          if (['MATNR', 'MAKTX'].includes(field)) return 180
          if (field === 'MATTYPE') return 120
          return
        }

        const handleSearch = () => {
          const filterVal = String(filterName.value).trim().toLowerCase()
          if (filterVal) {
            const filterRE = new RegExp(filterVal, 'gi')
            const searchProps = [`MATNR`, `MAKTX`]
            const rest = tableData.value.filter((item) =>
              searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
            )
            searchData.value = rest.map((row) => {
              // 搜索为克隆数据，不会污染源数据
              const item = XEUtils.clone(row)
              searchProps.forEach((key) => {
                item[key] = String(item[key]).replace(
                  filterRE,
                  (match) => `<span class="keyword-highlight">${match}</span>`,
                )
              })
              return item
            })
          } else {
            searchData.value = tableData.value
          }
        }
        // 节流函数,间隔500毫秒触发搜索
        const searchEvent = XEUtils.throttle(
          function () {
            handleSearch()
          },
          500,
          { trailing: true, leading: true },
        )

        return {
          loading,
          filterName,
          searchEvent,
          tableRef,
          toolbarRef,

          tableData,
          searchData,
          tableColumns,
        }
      },
    })

    app.use(ElementPlus)
    app.use(VxeUI)
    app.use(VxeUITable)
    app.mount('#app')
  </script>
  <style>
    .marginTop10 {
      margin-top: 10px;
    }
    .keyword-highlight {
      background-color: #ffff00;
    }
  </style>
</html>
